<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import {getAqiBar} from "@/api/air/pollutant";
import dayjs from 'dayjs'
const animationDuration = 2000

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      day:30,
      zoomSize:8,
      chart: null,
      chartData:{
        date:[],
        aqi:[],
      },
      dataList:[],
      queryParams: {
        primary_pollutant: null,
        aqi: null,
        pm10: null,
        o38h: null,
        area: null,
        co: null,
        o3: null,
        area_code: null,
        so2: null,
        no2: null,
        quality: null,
        num: null,
        ct: null,
        pm25: null
      },
    }
  },

  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  created(){
    this.getBar();
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    // const zoomSize = 8;

    getBar(){
      console.log(this.day)
      getAqiBar(this.day).then(response => {
        this.dataList  = response.data;
        // console.log(response.data);
        const m = ['ct','aqi'];
        this.dataList.forEach(data=>{
          this.chartData.date.push(dayjs(data.ct).format('MM-DD'));
          this.chartData.aqi.push(Math.round(data.aqi*100)/100); 
        })
        console.log("---------------")
        console.log(this.chartData.date)
       this.initChart();
       
      })
    },
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')

      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          top: 10,
          left: '2%',
          right: '5%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: this.chartData.date,
          
          axisTick: {
            show: false
          },
          axisLine: {
          show: false,//不显示坐标轴线
    },
    axisLabel:{
             //x轴文字的配置
            // show: true,
            rotate:15,
            interval: 4,//使x轴文字显示全
            // showMaxLabel: true,
            textStyle:{
                color:"#161a25"
              }
          },
        }],
        yAxis: [{
          type: 'value',
          axisTick: {
            show: false
          },
          splitArea: {
          show: false
          },
          splitLine:{
            lineStyle:{
            width:2,
            type:'dashed',
          }
          },
          axisLabel:{
            textStyle:{
                color:"#161a25"
              }
          },
          
          
        }],
        dataZoom: [
          {
            type: 'inside'
          }
        ],
        series: [{
          name: '日均AQI',
          type: 'bar',
          stack: 'vistors',
          barWidth: '60%',
          itemStyle: {
        color: 
        
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#6d64e8' },
          { offset: 0.5, color: ' #5271e6' },
          { offset: 1, color: ' #5271e6' },
        
        ]),
        barBorderRadius: [8, 8, 0, 0], // （顺时针左上，右上，右下，左下）
      },
      emphasis: {
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#7361e8' },
            { offset: 0.7, color: '  #33a9f7' },
            { offset: 1, color: '  #33a9f7' }
          ])
        }
      },
          data: this.chartData.aqi,
          markLine: {
            symbol: "none",
            data:[{
              yAxis: 50,
              lineStyle: {
              normal: {
                width:2,
                color: '#7CFFB2'                   // 这儿设置安全基线颜色
              }
            },
              label: {
              normal: {
                formatter: '优'           // 这儿设置安全基线
              }
            },
            },
            {
              yAxis: 100,
              lineStyle: {
              normal: {
                width:2,
                color: '#f6e901'                   // 这儿设置安全基线颜色
              }
            },
              label: {
              normal: {
                formatter: '良'           // 这儿设置安全基线
              }
            },
            }],
          
            
     
        },
          animationDuration
        }, 
        
      ]
      })
    },


    
  }
}
</script>
